<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="ie=edge" http-equiv="X-UA-Compatible" />
    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery.min.js" type="text/javascript">
    </script>
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery.min.js" type="text/javascript">
    </script>
    <script src="../js/jquery.easyui.min.js" type="text/javascript">
    </script>
    <script src="../js/jquery.serializejson.min.js" type="text/javascript">
    </script>
    <title>
        Document
    </title>
</head>

<body>
    <div style="margin:10px 0;">
    </div>
    <div class="easyui-layout" data-options="fit:true">
        <!-- <div data-options="region:'north'" style="height:50px"></div> -->
        <!-- <div data-options="region:'south',split:true" style="height:50px;"></div> -->
        <!--  <div data-options="region:'east',split:true" title="East" style="width:100px;"></div> -->
        <div data-options="region:'west',split:true" style="width:200px;" title="新闻列表">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'新闻评论',iconCls:'icon-ok'">
            <div id="ft" style="padding:5px 0;">
                content：
                <input class="easyui-input" id="key" name="content" style="width:110px;height:20px" />
                <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="#" onclick="search()" style="width:80px">
                    Search
                </a>
            </div>
            <table id="dg">
            </table>
        </div>
    </div>
    <div class="easyui-dialog" closed="true" data-options="iconCls:'icon-save'" id="dlg" style="width:500px;height:250px;padding:10px"
        title="Basic Dialog">
        <form id="ff" method="post">
            <div style="margin-bottom:20px;display:none">
                <input class="easyui-textbox" data-options="label:'id:',required:true" name="_id" style="width:100%" />
                <input class="easyui-textbox" data-options="label:'newsId:',required:true" name="newsId" style="width:100%" />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" data-options="label:'newsTitle:',required:true" name="newsTitle" style="width:100%" readonly
                />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" data-options="label:'content:',required:true" name="content" style="width:100%" />
            </div>
            <div id="tips" style="color: red">
            </div>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" href="#" id="dataSumbit">
                提交
            </a>
        </form>
    </div>
</body>

</html>
<script>
    //新闻tree
    $('#tt').tree({
        url:'http://localhost:3000/comments/tree/1',
        method:'get',
        // loadFilter: function(data){
        // if (data.d){
        //     return data.d;
        // } else {
        //     return data;
        // }
        onClick: function(node){ //点击一个新闻/分类，显示其下的评论
            var cateid = node._id;
            top.newsId = node._id;
            window.doSearch(cateid);
        }
    });


    //加载表单
    $('#dg').datagrid({
        loadMsg: '加载中,请稍等',
        url: '',
        fit: true,
        pagination: true,
        pageSize: 5,
        pageList: [5, 10, 20, 30, 40, 50],
        newsId: '5b0cfde776d09032ccc0bf7c',
        queryParams: {
            rows: this.pageSize,
            page: this.page,
            newsId: top.newsId
        },
        //字段&&按钮
        columns: [[
            { field: 'ck', checkbox: true },
            { field: 'newsId', title: 'newsId', hidden: true },
            { field: 'newsTitle', title: '新闻标题', width: 100 },
            { field: 'content', title: '评论内容' },
            { field: 'date', title: '时间' },
            {
                field: 'operate', title: '操作', width: 200,
                formatter: function (value, row, index) {
                    return "<a href='javascript:void(0)' onclick=onDelete('" + row._id + "')>删除</a> <a href='javascript:void(0)' onclick=onUpdata('" + row._id + "')>修改</a>"
                }
            }
        ]],
        toolbar: [{
            //新增记录按钮
            iconCls: 'icon-add',
            handler: function () {
                $('#ff').form('clear');
                search();
            }
        }, '-', {
            //批量删除记录按钮
            iconCls: 'icon-remove',
            handler: function () {
                var ids = [];
                var rows = $('#dg').datagrid('getSelections');
                //判断是否已选择数据
                if (rows.length > 0) {
                    for (var i in rows) {
                        ids.push(rows[i]._id);
                    }
                } else {
                    $.messager.show({
                        title: '信息提示',
                        msg: '请选择需要删除的数据！',
                        showType: 'show'
                    });
                    return;
                }

                $.messager.confirm('记录删除', '确定要删除吗?', function (r) {
                    if (r) {
                        $.ajax({
                            url: `http://localhost:3000/comments/data/removes`,
                            type: 'post',
                            data: {
                                ids: ids.toString()
                            }
                        }).then(res => {
                            if (res.status == 200) {
                                $.messager.show({
                                    title: '信息提示',
                                    msg: res.message,
                                    showType: 'show'
                                });
                                $('#dg').datagrid('reload');
                            }
                        });
                    }
                });
            }
        }],
        footer: '#ft'
    });

    //提交按钮点击事件
    $('#dataSumbit').click(function () {
        var formData = $('#ff').serializeJSON();//获取表单数据，以json格式输出
        var content = formData.content;
        let method = 'post';
        let url = 'http://localhost:3000/comments/data';

        //判断记录是否有_id值，若有，进行修改操作；无，则进行新增
        if (formData._id.trim().length > 0) {
            $('#tips').text('');
            url += '/' + formData._id;
            method = 'put';
        } else {
            var treeSelect = $("#tt").tree('getSelected');
            formData['paths'] = treeSelect.path + ',' + treeSelect._id;
            //新增时，此时_id是空值，会影响ajax请求，故删除_id字段
            delete formData._id;
        }

        //进行ajax操作
        if (content && content.trim().length > 0) {
            $.ajax({
                url: url,
                type: method,
                data: formData
            }).then(function (res) {
                $('#dlg').dialog('close');
                window.doSearch(formData.newsId);
            })
        } else {
            $('#tips').text('邮箱或者密码格式不能为空，请确认');
        }
    });

    //数据删除按钮点击事件
    function onDelete(id) {
        $.messager.confirm('记录删除', '确定要删除吗?', function (r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/comments/data/${id}`,
                    type: 'delete'
                }).then(res => {
                    if (res.status == 200) {
                        $.messager.show({
                            title: '信息提示',
                            msg: res.message,
                            showType: 'show'
                        });
                        $('#dg').datagrid('reload');
                    }
                });
            }
        });
    }

    //数据修改按钮点击事件
    function onUpdata(id) {
        $.ajax({
            url: `http://localhost:3000/comments/data/${id}`,
            type: 'get',
        }).then(function (res) {
            $('#ff').form('load', res);
            tipsText();
        })
    }

    //新增时打开form表单 表单非空提示div的数据删除，使tips提示根据表单是否为空重新提示 
    function tipsText() {
        $('#dlg').dialog('open');
        $('#tips').text('');
    }

    //表单搜索
    function search() {
        var treeSelect = $("#tt").tree('getSelected');
        console.log(treeSelect)
        if(treeSelect && !treeSelect.type) {
            //设置新闻标题内容
            $('#ff').form('load', { newsTitle: treeSelect.text,newsId: treeSelect._id });
            tipsText();
        } else {
            $.messager.show({
                title: '信息提示',
                msg: '请在左侧tree中，选择新闻选项',
                showType: 'show'
            });
        }
    }

    //表单搜索
    function doSearch(newsId) {
        var dg = $('#dg').datagrid('options');
        var content = $('#key').val();
        dg.url = 'http://localhost:3000/comments/list';

        $('#dg').datagrid('reload', {
            rows: dg.pageSize,
            page: dg.page,
            newsId: newsId,
            content: content
        });
    }

    //打开界面，刷新grid
    (function(){
        let newsId = top.newsId;
        if(newsId) {
            doSearch(newsId);
        } 
    })();
</script>